<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <style type="text/css">
     body {background-color: white; font-family: helvetica, Arial, sans-serif; font-size: 8pt;}
     a {font-family: Helvetica, Arial, sans-serif; font-size: 8pt;}
     input {font-family: Helvetica, Arial, sans-serif; font-size: 8pt;}
     select {font-family: Helvetica, Arial, sans-serif; font-size: 8pt;}
     td {font-family: Helvetica, Arial, sans-serif; font-size: 8pt;}
  </style>
    <script type="text/javascript" src="../../js/HttpRequest.js"></script>
    <script type="text/javascript" src="../../js/StringAdditions.js"></script>
    <script type="text/javascript">
        var httpManager = new HttpManager();
        var submittedFormId = null;

        //Added ability to find a child node by its name regardless of its level
        HTMLFormElement.prototype.getChildElementById = function (eid) 
        {
            var elements = this.getElementsByTagName('*');

            for ( var i = 0; i < elements.length; i++ ) {
                if ( elements[i].id == eid ) {
                    return elements[i];
                }
            }

            return null;
        }

        function refreshImageInfoForOneForm(formId) 
        {
            var frm = document.getElementById(formId);
            var id = frm.getChildElementById('ii_id').innerHTML;

            //Load Image Info by its id
            httpManager.onread = function (infoString) {
                var imgInfo = infoString.split("|");

                frm.getChildElementById('ii_description').value = imgInfo[1];
                frm.getChildElementById('ii_source').value = imgInfo[2];
                frm.getChildElementById('ii_email').value = imgInfo[9];
                frm.getChildElementById('ii_submit_date').value = imgInfo[3];
                frm.getChildElementById('ii_status').value = imgInfo[4];
                frm.getChildElementById('ii_publish_date').value = imgInfo[5];
                frm.getChildElementById('ii_comment').value = imgInfo[10];
                frm.getChildElementById('ii_img_resolution').innerHTML = imgInfo[6] + ' x ' + imgInfo[7];
                frm.getChildElementById('ii_img_length').innerHTML = Math.round((imgInfo[8] / 1024)) + "K";
                //frm.getChildElementById('ii_img').src = "../get_image_by_img_id.php?nocache=" + Math.random() + "&img_id=" + imgInfo[0];
            };
            httpManager.getAsText("../get_image_info_by_id.php?img_id=" + id);
        }

        function rotateImageForOneForm(formId)
        {
            var frm = document.getElementById(formId);
            var id = frm.getChildElementById('ii_id').innerHTML;

            //Rotate and reload the image
            tmp = "../rotate_image_by_img_id.php?nocache=" + Math.random() + "&img_id=" + id;
            frm.getChildElementById('ii_img').src = tmp;
        }

        function resizeImageForOneForm(formId, w, h)
        {
            var frm = document.getElementById(formId);
            var id = frm.getChildElementById('ii_id').innerHTML;

            //Scal to the desired width and height
            tmp = "../resize_image_by_img_id.php?nocache=" + Math.random() + "&width=" + w + "&height=" + h + "&img_id=" + id;
            frm.getChildElementById('ii_img').src = tmp;
        }

        function debugPrint(msg)
        {
            var dp = document.getElementById("debug_panel");
            dp.innerHTML += msg;
            dp.innerHTML += "<br>";
        }

    </script>
</head>
<body>
  
    <div id="debug_panel" style="position: fixed; top: 300px; left: 700px; width: 500px; height: 200px; background-color: rgb(200, 200, 200);">
    </div>

   <iframe id="result_target" name="result_target" src=""
           style="position: fixed; top: 10px; left: 700px; border: 1px solid gray; width: 380px; height: 110px; background-color: white;"
           onload='if ( submittedFormId != null ) refreshImageInfoForOneForm(submittedFormId);'>
   </iframe>
    
    <div id="image_infos_panel">
        Loading image infos...

    <script type="text/javascript">
    httpManager.onread = function (infoString) {

        debugPrint(infoString);
        var imgInfos = infoString.split("\n");
        var imgInfosPanel = document.getElementById("image_infos_panel");
        imgInfosPanel.innerHTML = "";

        for ( var i = 0; i < imgInfos.length; i++ ) {
            var imgInfo = imgInfos[i].split("|");

            imgInfosPanel.innerHTML += '\
    <form id="ii_form_' + i + '" method="post" enctype="multipart/form-data" action="set_image_info.php" target="result_target" \n\
              style="background-color: white; text-align: left;"\n\
              onsubmit="submittedFormId = \'ii_form_' + i + '\';"> \n\
        <table style="text-align: left; border: thin solid red;" border="0" cellpadding="1" cellspacing="1">\n\
            <tr>\n\
                <td id="ii_id" style="text-align: center; color: white; background-color: blue;" colspan="4" rowspan="1">' + imgInfo[0] + '\n\
                </td>\n\
                <input name="ii_id" value="' + imgInfo[0] + '" type="text" size="1" style="visibility: hidden">\n\
            </tr>\n\
            <tr>\n\
                <td style="text-align: right; width: 100px; ">Description</td>\n\
                <td><input id="ii_description" name="ii_description" size="28" type="text" style="width: 100%;" value="' + imgInfo[1] + '"></td>\n\
                <td colspan="1" rowspan="8">\n\
                    <a href="../get_image_by_img_id.php?img_id=' + imgInfo[0] + '">\n\
                        <img id="ii_img" style="border: 0px solid; height: 200px;" src="../get_image_by_img_id.php?img_id=' + imgInfo[0] + '"/>\n\
                    </a>\n\
                </td>\n\
                <td style="text-align: center; width: 100px" id="ii_img_resolution">Undefined</td>\n\
            </tr>\n\
            <tr>\n\
                <td style="text-align: right; width: 100px">Source</td>\n\
                <td><input id="ii_source" name="ii_source" size="28" type="text" value="' + imgInfo[2] + '"></td>\n\
                <td style="text-align: center; width: 100px" id="ii_img_length">Undefined</td>\n\
            </tr>\n\
            <tr>\n\
                <td style="text-align: right; width: 100px">Email</td>\n\
                <td><input id="ii_email" name="ii_email" size="28" type="text" value="' + imgInfo[6] + '"></td>\n\
            </tr>\n\
            <tr>\n\
                <td style="text-align: right; width: 100px">Submit Date</td>\n\
                <td><input id="ii_submit_date" name="ii_submit_date" size="28" type="text" value="' + imgInfo[3] + '"></td>\n\
            </tr>\n\
            <tr>\n\
                <td style="text-align: right; width: 100px">Status</td>\n\
                <td><select id="ii_status" name="ii_status">\n\
                      <option>Pending</option>\n\
                      <option>Approved</option>\n\
                      <option>Denied</option>\n\
                    </select>\n\
                </td>\n\
            </tr>\n\
            <tr>\n\
                <td style="text-align: right; width: 100px">Publish Date</td>\n\
                <td><input id="ii_publish_date" name="ii_publish_date" size="28" type="text" value="' + imgInfo[5] + '"></td>\n\
            </tr>\n\
            <tr>\n\
                <td style="text-align: right; width: 100px">Comment</td>\n\
                <td><input id="ii_comment" name="ii_comment" size="28" type="text" value="' + imgInfo[7] + '"></td>\n\
            </tr>\n\
            <tr>\n\
                <td colspan="2" rowspan="1" />\n\
            </tr>\n\
            <tr>\n\
                <td colspan="2" rowspan="1" style="text-align: right;">\n\
                    <input id="ii_submit" value="Update" type="submit">&nbsp&nbsp\n\
                    <input id="ii_rotate" value="Rotate" type="button" onclick="rotateImageForOneForm(\'ii_form_' + i + '\');">&nbsp&nbsp\n\
                    <input id="ii_resize_small" value="Small" type="button" onclick="resizeImageForOneForm(\'ii_form_' + i + '\', 640, 480);">&nbsp&nbsp\n\
                    <input id="ii_info" value="Info" type="button" onclick="refreshImageInfoForOneForm(\'ii_form_' + i + '\');">\n\
                </td>\n\
            </tr>\n\
        </table>\n\
   </form>\n\
    ';
        }

        //Set the statuses
        for ( var i = 0; i < imgInfos.length; i++ ) {
            var imgInfo = imgInfos[i].split("|");
            document.getElementById('ii_form_' + i).getChildElementById('ii_status').value = imgInfo[4];
        }
    }
    
    //Sends in the request for all image names. The response will come back as a callback in the function above
    var imgInfosAsString = httpManager.getAsText("../get_image_infos.php");
    </script>
    </div>
</body>
</html>
